<template>
  <pageTabelLayout>
    <template #pageHeader>
      <div class="my-tool-bar" style="padding-top: 20px">
        <a-form size="small" :model="query" layout="inline">
          <a-form-item label="日期" prop="beginDate">
            <a-date-picker
              popup-container="html"
              v-model="query.beginDate"
              :style="{ width: '180px' }"
              placeholder="选择开始日期"
              class="bacClass"
            />
          </a-form-item>
          <CorporateSectorCascader
            :configCascader="configCascader"
            @changeCascader="changeCascader"
          />
          <!-- <a-form-item label="厂区" prop="planOrderCode">
            <a-input allow-clear :style="{ width: '180px' }" class="bacClass" v-model="query.planOrderCode" />
          </a-form-item> -->
        </a-form>
        <div class="my-tool-bar" style="margin-bottom: 5px">
          <a-space>
            <el-button type="primary" :icon="Search" @click="getList">查询</el-button>
            <!-- <el-button pain @click="emit('takebiaoji', 0)" plain>返回主页</el-button> -->
          </a-space>
        </div>
        <div class="my-divisders">
          <a-divider orientation="center">
            <icon-double-up
              v-if="headerShow"
              @click="headerShow = false"
              :strokeWidth="2"
              :size="18"
            />
            <icon-double-down v-else @click="headerShow = true" :strokeWidth="2" :size="18" />
          </a-divider>
        </div>
      </div>
    </template>
      
    <template #pageTabel>
      <a-spin
            :loading="pageLoading"
            tip="加载中"
            dot
            style="height: 100%; width: 100%; z-index: 999"
          >
   <AgGridVuesCopys
        :rowHeight="33"
        :headerHeight="33"
        :suppressCopyRowsToClipboard="true"
        rowSelection="multiple"
        @grid-ready="gridReady"
        style="height: calc(100% - 30px)"
        :defaultColDef="defaultColDef"
        class="ag-theme-alpine"
        :rowData="tableDataList"
        :columnDefs="tc"
        :localeText="localeText1"
        @FilterChanged="FilterChangeds"
      >
      </AgGridVuesCopys>
    </a-spin>
    </template>
  </pageTabelLayout>
</template>

<script lang="ts" setup>
import { Message } from '@arco-design/web-vue'
import { ref, reactive, onMounted, watch } from 'vue'
import CorporateSectorCascader from '@/components/corporateSectorCascader/inde.vue'
// 引入element提示
//引入封装post
import { post } from '@/api/http'
import { Search, EditPen } from '@element-plus/icons-vue'
import dayjs from 'dayjs'
import { localeText } from '@/api/aggridZw'
const localeText1: any = ref(localeText)
const emit = defineEmits(['takebiaoji'])
const headerShow = ref<boolean>(true)
const pageLoading = ref<boolean>(false)
const configCascader = ref<{}>({
  corporateWidth: '200px', //公司宽度
  sectorWidth: '180px', //部门宽度
  corporateRquired: false, //公司是否必填
  sectorRquired: false, //部门是否必填
  size: 'mini', //选择框大小'mini' | 'small' | 'medium' | 'large'
  corporateName: '厂区', //公司label
  sectorName: '选择部门', //部门label
  cascaderShow: 'sector', //配置部门不显示
})
const changeCascader = (data: any) => {
  const { corporateId, sectorId, sectorLabel, corporateLabel } = data
  query.planOrderCode = corporateId
}

interface Querin {
  beginDate: any
  planOrderCode: string
}
//getlist初始化接口参数
let query = reactive<Querin>({
  beginDate: dayjs().format('YYYY-MM-DD'), //当天日期
  planOrderCode: '',
})

const tableDataList: any = ref([])
const gridOption = ref()
const gridReady = (params: any) => {
  gridOption.value = params.api
}
const defaultColDef = {
  sortable: true,
  resizable: true,
  filter: true,
  flex: 1,
}

const tc = [
  {
    headerName: '织厂单位',
    field: 'firmName',
    width: 150,
  },
  {
    headerName: '楼层',
    field: 'areaName',
    width: 150,
  },
  {
    headerName: '设备机型',
    field: 'machineTypeName',
    width: 150,
  },
  {
    headerName: '针寸数',
    field: 'specification',
    width: 150,
  },
  {
    headerName: '总机台数(台)',
    field: 'totalNum',
    width: 150,
  },
  {
    headerName: '开机台数(台)',
    field: 'openNum',
    width: 150,
  },
  {
    headerName: '本集团开机台数(台)',
    field: 'openNumB',
    width: 150,
  },
  {
    headerName: '外加工开机台数(台)',
    field: 'openNumW',
    width: 150,
  },
  {
    headerName: '开机占比(%)',
    field: 'ratio',
    width: 150,
  },
]
// let configTable = ref({
//   url: 'planSingle/report/openingMachine', //接口路径
//   queryData: {
//     //接口参数
//   },
//   // isGet:true,//是否是get请求
//   // isLimit:true,//后端分页接收limit而非size
//   paginationShow: false, //分页是否显示
//   invokeiIterface: false, //是否调用接
//   rowMultiSelectWithClick: true, //点击行是否多选
//   column: tc,
//   fileName: 'biReportYTKJL', //导出文件名
// })
/**
   * 
    {
      headerName: '针寸数',
      field: 'mouthBigDecimal',//
      width: 150
    },
    {
      headerName: '客户名称',
      field: 'mouthBigDecimal',//
      width: 150
    },
    {
      headerName: '统计开始时间',
      field: 'mouthBigDecimal',//
      width: 150
    },
    {
      headerName: '统计结束时间',
      field: 'mouthBigDecimal',//
      width: 150
    },
   */

function selectJt() {
  pageLoading.value = true
  post({
    url: 'planSingle/report/openingMachine',
    data: {
      firmId: query.planOrderCode, //公司ID
      areaName: '', //机台类型
      machineTypeName: '', //设备编号机器编号
      date: query.beginDate, //日期时间
    },
  })
    .then((res: any) => {
      if (res.code == 200) {
        tableDataList.value = res.data
        gridOption.value.setRowData(res.data)
        createTotalRow(tableDataList.value)
      } else {
        Message.error(res.message)
      }
    })
    .catch(console.log)
    .finally(() => {
      pageLoading.value = false
    })
  // try {
  //   gridOption.value
  //     .setQuery({
  //       firmId: query.planOrderCode, //公司ID
  //       areaName: '', //机台类型
  //       machineTypeName: '', //设备编号机器编号
  //       date: query.beginDate, //日期时间
  //     })
  // } catch (error) {
  //   console.log(error)
  // }
}

const getList = () => {
  selectJt()
}

function createTotalRow (data:any) {
  var sum1 = 0
  var sum2 = 0
  var sum3 = 0
  var sum4 = 0
  for (var i = 0; i < data.length; i++) {
    sum1 = sum1 + data[i].totalNum
    sum2 = sum2 + data[i].openNum
    sum3 = sum3 + data[i].openNumB
    sum4 = sum4 + data[i].openNumW
  }
  var nowRows = [
    {
      specification: '汇总',
      totalNum: sum1.toFixed(0),
      openNum: sum2.toFixed(0),
      openNumB: sum3.toFixed(0),
      openNumW: sum4.toFixed(0),
      ratio: ((sum2/sum1)*100).toFixed(2) == 'NaN' ? '0.00%' : ((sum2/sum1)*100).toFixed(2) + '%'
    },
  ]
  gridOption.value.setPinnedBottomRowData(nowRows)
}

const FilterChangeds = (params:any)=>{
    let data: any = {
    list: [],
  }
  params.api.forEachNodeAfterFilter((row: any) => {
    data.list.push(row.data)
  })
  createTotalRow(data.list)
}
</script>
<style scoped>
.contioner {
  height: 100%;
  background: #fff;
}

:deep(.ag-cell) {
  border-right: 1px solid #dde2eb;
}

:deep(.ag-header-cell) {
  border-right: 1px solid #dde2eb;
}

:deep(.ag-cell-value) {
  user-select: initial;
  -moz-user-select: text;
  -ms-user-select: text;
  -webkit-user-select: text;
}
</style>
